<template>
  <view class="list-card">
    <view class="list-con" v-for="(item, index) in listConf" :key="index" hover-class="hover-active" @click="toUrl(item.url)">
      <view class="list-item">
        <image :src="item.icon" style="width: 48rpx; height: 48rpx"></image>
        <text class="item-title">{{item.title}}</text>
      </view>
      <uni-icons type="right" color="#c1c1c1" size="16"></uni-icons>
    </view>
  </view>
</template>

<script setup>

import listIcon1 from "@/subPages/static/s1.svg";
import listIcon2 from "@/subPages/static/s2.svg";
import listIcon3 from "@/subPages/static/s3.svg";
import listIcon4 from "@/subPages/static/s4.svg";

const listConf = reactive([
  {
    icon: listIcon1,
    title: "用户协议",
    url: "/subPages/settings/privacy?type=1",
  },
  {
    icon: listIcon2,
    title: "隐私政策",
    url: "/subPages/settings/privacy?type=3",
  },
  {
    icon: listIcon3,
    title: "平台介绍",
    url: "/subPages/settings/privacy?type=2",
  },
  {
    icon: listIcon4,
    title: "订单记录",
    url: "/subPages/settings/order",
  },
]);

const toUrl = (url) => {
  uni.navigateTo({ url });
};
</script>

<style lang=scss scoped>
.list-card {
  background: #fff;
  padding: 2rpx 30rpx;
  border-radius: 20rpx;
  .list-con {
    border-bottom: 1rpx solid #e6e6e6;
    @include flexAlignCenter;
    justify-content: space-between;
    padding: 34rpx 0;
    .list-item {
      flex: 1;
      @include flexAlignCenter;
    }
    .item-title {
      color: #333;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 10rpx;
    }
    &:last-child {
      border: none;
    }
  }

  .item-text {
    font-weight: 500;
    font-size: 28rpx;
    color: #999;
  }

  .item-count {
    height: 60rpx;
    padding: 10rpx 20rpx;
    @include borderBox;
    line-height: 40rpx;
    background: #f1444c;
    font-weight: 500;
    font-size: 36rpx;
    color: #fff;
    border-radius: 100rpx;
  }
}
</style>